<style>
.ivu-table-wrapper {
  overflow: visible !important;
}
#createProject .contentTag .ivu-icon-ios-close {
  /* overflow:visible !important;
    height:64px !important; */
  position: relative !important;
  /* bottom: -3px; */
  top: -13px !important;
}
#createProject .contentTag .ivu-tag-dot-inner {
  position: relative !important;
  top: -11px !important;
  /* min-height: 32px !important;
    height:64px !important; */
}
#createProject .ivu-tag-text {
  /* word-break: break-all !important; */
  width: 220px !important;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.currentSelect {
  background: #008df1;
}
.hoverSelect {
  background: #ddd;
}
</style>

<template>
  <div class="page-wrap">
    <div class="page-content" :style="{ height: contentHei }">
      <div class="img-header">
        <div style="font-weight: 700;font-size: 18px">场景工程</div>
        <div style="display: flex;justify-content: flex-end;width: 50%">
          <Button type="primary" class="md-add-jh" @click="creatProBtn" style="margin-right:10px"
            >创建工程</Button
          >
          <Input
            v-model.trim="searchProjectname"
            placeholder="工程名称"
            clearable
            @on-change="searchProName"
            style="margin: 0 15px;"
            @on-change="limitingReach()"
          />
          <Select filterable
            v-model="projectTypeValue"
            filterable
            clearable
            placeholder="请选择工程类型"
            @on-change="listenProjectTypeList"
          >
            <Option value="offense_and_defense">攻防赛</Option>
            <!-- <Option  value="capture_the_flag">夺旗赛</Option> -->
            <!-- <Option  value="red_and_blue_confrontation">对抗演练</Option> -->
            <Option value="break_through">渗透演练</Option>
            <!-- <Option  value="protect_network_exercise" >护网演练</Option> -->
            <!-- <Option  value="schedule">排课计划</Option> -->
            <!-- <Option  value="examination_plan">考试计划</Option> -->
            <!-- <Option  value="test">课件</Option> -->
            <!-- <Option  value="other">其他</Option> -->
          </Select>
        </div>
      </div>
      <Divider />
      <div class="table-wrap">
        <Table border :columns="proCol" :data="projectList" :max-height="setTableHei"></Table>
        <div style="display: flex;justify-content: center;margin: 15px 0">
          <Page
            :total="proTotal"
            :current="currentPage"
            :page-size="currentItem"
            show-total
            show-elevator
            @on-change="switchineTaskCurrentPage"
            @on-page-size-change="switchTaskItemPage"
          />
        </div>
      </div>
    </div>

    <Modal
      v-model="createProjectTaskModal"
      title="创建工程"
      ok-text="确定"
      width="800"
      :loading="createProjectTaskModalLoading"
      id="createProject"
      @on-ok="saveProjectData"
      @on-cancel="cancel"
    >
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
        style="position:relative;min-height:399px"
      >
        <FormItem label="名字" prop="name" style="width:50%">
          <Input
            v-model.trim="formValidate.name"
            placeholder="请输入工程名称"
            clearable
            :maxlength="64"
          ></Input>
        </FormItem>
        <FormItem label="类型" prop="type" style="width:50%">
          <Select filterable
            v-model="formValidate.type"
            filterable
            clearable
            placeholder="请选择场景类型"
            @on-change="listentTaskType"
          >
            <Option value="offense_and_defense">攻防赛</Option>
            <!-- <Option  value="capture_the_flag">夺旗赛</Option> -->
            <!-- <Option  value="red_and_blue_confrontation">对抗演练</Option> -->
            <Option value="break_through">渗透演练</Option>
            <!-- <Option  value="protect_network_exercise" >护网演练</Option> -->
            <!-- <Option  value="schedule">排课计划</Option> -->
            <!-- <Option  value="examination_plan">考试计划</Option> -->
            <!-- <Option  value="test">课件</Option> -->
            <!-- <Option  value="other">其他</Option> -->
          </Select>
        </FormItem>
        <div
          style="width:49%;overflow:hidden;position:absolute;right:0px;top:0px;border-left:1px solid #ddd"
        >
          <!-- <div style="width:365px;float:left;">
                        <FormItem v-model="formValidate.selectedVmData"  label="环境配置">
                            <span class="starlet" style="left:-70px">*</span>
                            <input type="hidden" >
                            <Tag v-for="(item,index) in formValidate.selectedVmData" :key="index" :name="item.id" closable @on-close="handleClose2(index)" color="primary" type='dot' >{{ item.name }}</Tag>
                        </FormItem>
                   </div> -->
          <div style="width:400px;float:right;">
            <FormItem label="类型" prop="vmType" style="margin-bottom:10px">
              <!-- <Select filterable v-model="formValidate.vmType" placeholder="请选择类型"   filterable clearable @on-change="listenTypeChange">
                                <Option  key="1" value="CLIENT" >CLIENT</Option>
                                <Option  key="2" value="SERVER" >SERVER</Option>
                            </Select> -->
              <RadioGroup v-model="formValidate.vmType" @on-change="listenTypeChange">
                <Radio label="CLIENT">CLIENT</Radio>
                <Radio label="SERVER">SERVER</Radio>
              </RadioGroup>
            </FormItem>

            <div style="margin-bottom:10px;padding-left:55px;">
              <Button
                :type="btnValue == 2 ? 'primary' : 'default'"
                @click="topicMethod"
                :style="{
                  width: '150px',
                  position: 'relative',
                  right: '14px',
                  background: disabledColor
                }"
                :disabled="disabledClient"
                >题目</Button
              >
              <Button
                :type="btnValue == 1 ? 'primary' : 'default'"
                @click="targetMethod"
                :style="{
                  width: '150px',
                  position: 'relative',
                  left: '40px',
                  background: disabledColor
                }"
                :disabled="disabledClient"
                >靶标</Button
              >
            </div>
            <u style="position:absolute;left:17px;top:80px;font-size:14px;" v-if="hintBol"
              >需手动配置Flag</u
            >
            <FormItem label="题目" v-if="btnValue == 2" style="margin-top:0px">
              <Select filterable
                v-model="currentTargetValue"
                placeholder="请选择题目"
                filterable
                clearable
                @on-change="listenTargetValue"
                :disabled="topicBol"
              >
                <Option
                  v-for="item in targetDataList"
                  :key="item.chaId"
                  :value="item.chaId"
                  :title="item.name"
                  >{{ item.name }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="靶标" v-if="btnValue == 1" style="margin-top:30px;">
              <Select filterable
                v-model="currentTargetValueVm"
                placeholder="请选择靶标"
                filterable
                clearable
                @on-change="listenTargetValueVm"
                :disabled="topicBol"
              >
                <Option
                  v-for="item in targetVmListData"
                  :key="item.targetId"
                  :value="item.targetId"
                  :title="item.targetName"
                  >{{ item.targetName }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="镜像" prop="image">
              <Select filterable
                v-model="formValidate.image"
                placeholder="请选择镜像"
                filterable
                clearable
                @on-change="listenImageValue"
              >
                <Option
                  v-for="item in imageDataList"
                  :key="item.id"
                  :value="item.id"
                  :title="item.imagename"
                  >{{ item.imagename }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="配额" prop="flavor">
              <Select filterable
                v-model="formValidate.flavor"
                placeholder="请选择配额"
                filterable
                clearable
                @on-change="listenFlavorValue"
              >
                <Option
                  v-for="item in flavorDataList"
                  :key="item.openstackid"
                  :value="item.openstackid"
                  :title="item.flavorname"
                  >{{ item.flavorname }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="数量" prop="numbers">
              <input-number
                :min="1"
                :value="1"
                :max="10000"
                v-model="formValidate.numbers"
                style="width:303px"
              ></input-number
              >个
            </FormItem>
            <FormItem label="前缀" prop="pre">
              <span class="starlet" style="left:-47px">*</span>
              <Input
                v-model.trim="formValidate.pre"
                placeholder="请输入设备名称前缀"
                clearable
                :maxlength="64"
              ></Input>
            </FormItem>
            <FormItem style="text-align:center;margin-bottom:0px;position:relative;top:-10px;">
              <Button @click="commitSelectData" long type="warning" ghost>确定</Button>
            </FormItem>
          </div>
        </div>
        <FormItem label="环境数量" prop="setNumber" style="width:50%">
          <input-number
            :min="1"
            :value="1"
            :max="10000"
            v-model="formValidate.setNumber"
            style="width:288px"
          ></input-number
          >套
        </FormItem>
        <FormItem label="描述" prop="desc" style="margin-top:10px;width:50%">
          <Input
            v-model.trim="formValidate.desc"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
            placeholder="Enter something..."
            clearable
            :maxlength="200"
          ></Input>
        </FormItem>
        <FormItem
          v-model="formValidate.selectedVmData"
          label="环境配置"
          style="width:50%"
          class="contentTag"
        >
          <span class="starlet" style="left:-70px">*</span>
          <input type="hidden" />
          <Tag
            v-for="(item, index) in formValidate.selectedVmData"
            :key="index"
            :name="item.id"
            closable
            @on-close="handleClose2(index)"
            color="primary"
            type="dot"
            :title="item.name"
            >{{ item.name }}</Tag
          >
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
// import $ from 'jquery'
// import cookieUse from '@/libs/cookie.js'
// import encryption from '@//encryption.js'
const validateName = (rule, value, callback) => {
  var myReg = /[~!！@#$%^&*()/\|,<>?"'“‘();:+=\[\]{}]/;
  value = value.replace(/\s*/g, '');
  if (!value) {
    callback('请填写名字');
  } else {
    if (myReg.test(value)) {
      callback('名字不能包含特殊字符');
    } else {
      callback();
    }
  }
};
export default {
  components: {},
  data() {
    return {
      disabledClient: true,
      disabledColor: '#F4F4F4',
      hintBol: false,
      projectDelayStatus: '',
      searchProjectname: '',
      proCol: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '工程名称',
          key: 'name',
          align: 'center',
          render: (h, params) => {
            return h(
              'a',
              {
                on: {
                  click() {
                    window.openTrain(
                      `/topologyProject/index.html#/topologyDisplay/topologys?projectId=${params.row.id}`
                    );
                  }
                }
              },
              params.row.name
            );
          }
        },
        {
          title: 'OS工程名称',
          key: 'cloudName',
          align: 'center'
        },
        {
          title: '类型',
          key: 'type',
          align: 'center',
          maxWidth: 100,
          render: (h, params) => {
            return h('div', {}, this.getSceneType(params.row.type));
          }
        },
        {
          title: '环境套数',
          key: 'envCount',
          align: 'center',
          maxWidth: 70
        },
        {
          title: '配置信息',
          key: '',
          align: 'center',
          render: (h, params) => {
            let arr = [];
            if (params.row.targets && params.row.targets.length != 0) {
              let data = params.row.targets;
              for (let i = 0; i < data.length; i++) {
                if (data[i].targetType == 0) {
                  //其他
                  arr.push(
                    h(
                      'div',
                      {},
                      i +
                        1 +
                        '、' +
                        '镜像名称：' +
                        data[i].imageName +
                        '前缀：' +
                        data[i].namePrefix +
                        ';数量：' +
                        data[i].count
                    )
                  );
                } else if (data[i].targetType == 1) {
                  //靶标
                  arr.push(
                    h(
                      'div',
                      {},
                      i +
                        1 +
                        '、' +
                        '靶标:' +
                        data[i].targetName +
                        ';' +
                        '镜像名称：' +
                        data[i].imageName +
                        ';' +
                        '前缀：' +
                        data[i].namePrefix +
                        ';数量：' +
                        data[i].count
                    )
                  );
                } else if (data[i].targetType == 2) {
                  //题目
                  arr.push(
                    h(
                      'div',
                      {},
                      i +
                        1 +
                        '、' +
                        '题目:' +
                        data[i].targetName +
                        ';' +
                        '镜像名称：' +
                        data[i].imageName +
                        ';' +
                        '前缀：' +
                        data[i].namePrefix +
                        ';数量：' +
                        data[i].count
                    )
                  );
                }
              }
            }
            // console.log(params.row.deatil)
            return h('div', {}, arr);
          }
        },
        {
          title: '创建时间',
          key: 'created',
          align: 'center'
        },
        {
          title: '创建者',
          key: 'creatorName',
          align: 'center',
          maxWidth: 110
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 180,
          render: (h, params) => {
            let StatusCode = params.row.status;
            let _text = null;
            let color = null;
            // if(StatusCode==9||StatusCode==13||StatusCode==4){
            //     _text = "部署中"
            //     color = "#2D8CF0"
            // }else if(StatusCode==-2){
            //     _text = "部署失败"
            //     color = "#ED4014"
            // }else if(StatusCode==3||StatusCode==6||StatusCode==14||StatusCode==8){
            //     _text = "部署成功"
            //     color = "#19BE6B"
            // }else if(StatusCode==15){//自定义取消部署状态999
            //     _text = "取消部署中"
            //     color = "#2D8CF0"
            // }else if(StatusCode==0){//自定义取消部署状态999
            //     _text = "未部署"
            //     color = "#ddd"
            // }else{
            //     _text = null;
            //     color = '#ddd'
            // }
            if (StatusCode === 0) {
              _text = '未部署';
              color = '#888';
            } else if (StatusCode === 3) {
              _text = '部署成功';
              color = '#06b649';
            } else if (StatusCode === 4) {
              _text = '删除中';
              color = '#ff4242';
            } else if (StatusCode === 6) {
              _text = '部署失败';
              color = '#ff4242';
            } else if (StatusCode === 8) {
              _text = '删除失败';
              color = '#fa9901';
            } else if (StatusCode === 9) {
              _text = '部署中';
              color = '#06b649';
            } else if (StatusCode === 12) {
              _text = '待删除';
              color = '#888';
            } else if (StatusCode === 13) {
              _text = '清空部署中';
              color = '#ff8244';
            } else if (StatusCode === 14) {
              _text = '清空部署失败';
              color = '#ff8244';
            } else if (StatusCode === 16) {
              _text = '工程导入中';
              color = '#088cf0';
            } else if (StatusCode === 17) {
              _text = '工程导入失败';
              color = '#cb0236';
            }
            return h(
              'Tag',
              {
                props: {
                  type: 'dot',
                  color: color
                }
              },
              _text
            );
          }
        },
        {
          title: '操作',
          key: '',
          align: 'center',
          maxWidth: 110,
          render: (h, params) => {
            let _this = this;
            return h(
              'Poptip',
              {
                props: {
                  confirm: true,
                  title: '您确定要删除此工程吗？'
                },
                style: {
                  textAlign: 'left'
                },
                on: {
                  'on-ok': () => {
                    _this.deleteCurrentProject(params.row.status, params.row.id);
                  },
                  'on-cancel': () => {}
                }
              },
              [
                h(
                  'Button',
                  {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      margin: '5px'
                    }
                  },
                  '删除工程'
                )
              ]
            );
            // return h('Button',{
            //     props:{
            //         type:'error',
            //         size:'small'
            //     },
            //     style:{
            //        margin:'5px'
            //     },
            //     on:{
            //         click(){
            //             _this.$Modal.confirm({
            //                 title:"执行",
            //                 content:"您确定要删除该工程吗？",
            //                 onOk:()=>{
            //                     _this.deleteCurrentProject(params.row.status,params.row.id)
            //                 },
            //                 onCancel:()=>{
            //                 }
            //             })
            //         }
            //     }
            //     },'删除任务')
          }
        }
      ],
      projectList: [],
      createProjectTaskModal: false,
      createProjectTaskModalLoading: true,
      formValidate: {
        name: '',
        configer: '',
        Profile: '',
        osInfo: '',
        type: '',
        configContent: '',
        selectedVmData: [],
        desc: '',
        vmName: '',
        vmIP: '',
        taskMode: 'normal',
        flavor: '',
        image: '',
        deviceName: '',
        numbers: 1,
        vmType: 'CLIENT',
        pre: '',
        setNumber: 1
      },
      ruleValidate: {
        name: [{ required: true, message: '', trigger: 'change', validator: validateName }],
        configer: [{ required: true, message: '请选择配置', trigger: 'change' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        selectedVmData: [{ required: true, message: '请选择虚拟机' }],
        taskMode: [{ required: true, message: '', trigger: 'change' }],
        setNumber: [{ required: true, message: '', trigger: 'change', type: 'number' }],
        numbers: [{ required: true, message: '', trigger: 'change', type: 'number' }]
      },
      imageDataList: [],
      flavorDataList: [],
      proTotal: 0,
      currentPage: 1,
      currentItem: 10,
      setTableHei: 100,
      contentHei: 100,
      setintervalTime: null,
      currentTargetValue: '',
      currentTargetValueVm: '',
      targetDataList: [],
      getListModelBol: '',
      topicBol: true,
      projectTypeValue: '',
      targetVmListData: [],
      btnValue: 2
    };
  },
  created() {
    // this.getToken = cookieUse.getCookie('desig-token')
    // // 获取用户id
    // let November = sessionStorage.getItem('November')
    // November = JSON.parse(encryption.SelfUseDecrypt(November))
    // this.USER_ID = November.userId
    // this.isRootDesigner = November.isRootDesigner
    // this.showProjectSelect = November.isRootDesigner
  },
  mounted() {
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
    // 模板列表

    this.getProjectList();
  },
  computed: {},
  beforeDestroy() {
    clearInterval(this.proSetInterval);
  },
  methods: {
    topicMethod() {
      this.btnValue = 2;
      this.currentTargetValueVm = '';
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.hintBol = false;
    },
    targetMethod() {
      this.btnValue = 1;
      this.currentTargetValue = '';
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.hintBol = true;
    },
    limitingReach() {
      let _this = this;
      clearTimeout(_this.setTimeoutReach);
      _this.setTimeoutReach = setTimeout(() => {
        _this.getProjectList();
      }, 300);
    },
    listenProjectTypeList(value) {
      if (!value) {
        this.projectTypeValue = '';
      } else {
        this.projectTypeValue = value;
      }
      this.getProjectList();
    },
    listenTypeChange(value) {
      if (value == 'CLIENT') {
        this.topicBol = true;
        this.hintBol = false;
        this.disabledClient = true;
        this.disabledColor = '#F4F4F4';
      } else if (value == 'SERVER') {
        this.topicBol = false;
        // this.hintBol = true;
        this.disabledClient = false;
        this.disabledColor = '';
      } else {
        this.topicBol = true;
        this.hintBol = false;
      }
      this.getTargetDataList();
    },
    listentTaskType(value) {
      this.getListModelBol = '';
      if (value == 'offense_and_defense') {
        //攻防赛
        this.getListModelBol = 1;
      } else if (value == 'capture_the_flag') {
        //夺旗赛
        this.getListModelBol = 2;
      } else if (value == 'red_and_blue_confrontation') {
        //对抗演练
      } else if (value == 'break_through') {
        //渗透演练
      } else if (value == 'protect_network_exercise') {
        //护网演练
      } else if (value == 'schedule') {
        //排课计划
      } else if (value == 'examination_plan') {
        //考试计划
      } else if (value == 'test') {
        //课件
      } else if (value == 'other') {
        //其他
      } else {
        this.getListModelBol = '';
      }
      this.getTargetDataList();
    },
    getSceneType(type) {
      let _text = null;
      switch (type) {
        case 'offense_and_defense':
          _text = '攻防赛';
          break;
        case 'capture_the_flag':
          _text = '夺旗赛';
          break;
        case 'red_and_blue_confrontation':
          _text = '对抗演练';
          break;
        case 'break_through':
          _text = '渗透演练';
          break;
        // case "protect_network_exercise":
        //     _text = "护网演练"
        //     break;
        case 'schedule':
          _text = '排课计划';
          break;
        case 'examination_plan':
          _text = '考试计划';
          break;
        case 'test':
          _text = '课件';
          break;
        case 'other':
          _text = '其他';
          break;
        default:
          break;
      }
      return _text;
    },
    cancel() {},
    deleteCurrentProject(status, projectId) {
      this.axios({
        url: this.baseURL + '/topo-edit/project/delete/' + projectId,
        method: 'delete'
      }).then((response) => {
        response = response.data;
        if (response.code == 1) {
          this.$Message.success('删除成功');
          this.getProjectList();
        } else {
          this.$Message.error(response.message);
        }
      });
      // if(status!=0){
      //     this.$Message.info("请先清空部署该工程")
      //     return;
      // }else{

      // }
    },
    listenImageValue(value) {
      this.currentTargetValue = '';
    },
    listenFlavorValue(value) {
      this.currentTargetValue = '';
    },
    listenTargetValue(value) {
      let _this = this;
      _this.formValidate.image = '';
      _this.formValidate.flavor = '';
      _this.currentTargetValueVm = '';
      if (!value) {
        _this.formValidate.image = '';
        _this.formValidate.flavor = '';
      }
      for (let i = 0; i < _this.targetDataList.length; i++) {
        const element = _this.targetDataList[i];
        if (value == element.chaId) {
          if (!element.imageId || !element.flavorRef) {
          } else {
            _this.formValidate.image = element.imageId;
            _this.formValidate.flavor = element.flavorRef;
          }
        }
      }
    },
    listenTargetValueVm(value) {
      let _this = this;
      _this.formValidate.image = '';
      _this.formValidate.flavor = '';
      _this.currentTargetValue = '';
      if (!value) {
        _this.formValidate.image = '';
        _this.formValidate.flavor = '';
      }
      for (let i = 0; i < _this.targetVmListData.length; i++) {
        const element = _this.targetVmListData[i];
        if (value == element.targetId) {
          if (!element.imageId) {
            _this.$Message.info('无镜像ID，请手动选择');
          } else {
            _this.formValidate.image = element.imageId;
            // _this.formValidate.flavor = element.flavorRef
          }
        }
      }
    },
    getTargetDataList() {
      let _this = this;
      this.axios({
        // url:this.baseURL+'/exampaper/examPaperLibs/ctfPages?pageIndex=1&pageSize=1000000&visibility=all&isNeedEnv=1&matchMode='+this.getListModelBol,
        method: 'post',
        url: this.baseURL + '/new-paper/subjective/question/list?pageIndex=1&pageSize=1000000',
        data: { visibility: '', isNeedEnv: 1, matchMode: this.getListModelBol }
      }).then((response) => {
        response = response.data;
        if (response.code == 1) {
          response.data.items.forEach((item) => {
            this.$set(item, 'chaId', item.id);
          });
          _this.targetDataList = response.data.items;
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    switchineTaskCurrentPage(numberPage) {
      this.currentPage = numberPage;
      this.getProjectList();
    },
    switchTaskItemPage(numberSize) {
      this.currentItem = numberSize;
      this.getProjectList();
    },
    handleClose2(index) {
      console.log(index);
      this.formValidate.selectedVmData.splice(index, 1);
    },
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
      this.contentHei = this.fullHeight - 80 - 60 + 'px'; // 80是头部高度  60是上下padding
      this.setTableHei = this.fullHeight - 80 - 60 - 52 - 49 - 63;
      this.proPageSize = Math.floor(this.setTableHei / 50) - 1;
    },
    getProjectList() {
      let _this = this;
      this.axios({
        url:
          this.baseURL +
          '/competetopo/projects?pageIndex=' +
          this.currentPage +
          '&pageSize=' +
          this.currentItem +
          '&name=' +
          this.searchProjectname +
          '&type=' +
          this.projectTypeValue
      }).then((response) => {
        response = response.data;
        if (response.code == 1) {
          this.projectList = response.data.items;
          if (response.data.items.length != 0) {
            let bol = true;
            for (let index = 0; index < response.data.items.length; index++) {
              const element = response.data.items[index];
              // _this.axios({
              //     url:this.baseURL+'competetopo/projects/targets/'+element.id
              // }).then((datas)=>{
              //     datas = datas.data;
              //     if(datas.code==1){
              //         element['deatil'] = datas.data.items;
              //         _this.projectList.push(element)
              //     }else{
              //         _this.$Message.error(datas.message)
              //     }
              // })
              if (element.status == 9 || element.status == 13 || element.status == 4) {
                bol = false;
              }
            }
            if (bol) {
              clearTimeout(this.setintervalTime);
            } else {
              this.setintervalTime = setTimeout(() => {
                this.getProjectList();
              }, 3000);
            }
          }
          this.proTotal = response.data.total;
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    creatProBtn() {
      this.btnValue = 2;
      this.disabledClient = true;
      this.disabledColor = '#F4F4F4';
      this.currentTargetValue = '';
      this.currentTargetValueVm = '';
      this.hintBol = false;
      this.createProjectTaskModal = true;
      this.topicBol = true;
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.formValidate.num = '';
      this.formValidate.pre = '';
      this.formValidate.vmType = 'CLIENT';
      this.formValidate.name = '';
      this.formValidate.desc = '';
      this.formValidate.type = '';
      this.formValidate.selectedVmData = [];
      this.formValidate.setNumber = 1;
      this.formValidate.numbers = 1;
      this.getTargetDataList();
      this.getImageList();
      this.getFlavorList();
      this.getTargetVmList();
    },
    getImageList() {
      this.axios({
        url: this.baseURL + '/virtual/image/list',
        method: 'GET'
      }).then((response) => {
        response = response.data;
        console.log(response);
        if (response.code == 1) {
          this.imageDataList = response.data;
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    getFlavorList() {
      this.axios({
        url: this.baseURL + '/virtual/flavor/list',
        method: 'POST'
      }).then((response) => {
        response = response.data;
        if (response.code == 1) {
          this.flavorDataList = response.attribute.list;
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    saveProjectData() {
      let _this = this;
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          if (this.formValidate.selectedVmData.length != 0) {
            let arr = [];
            for (let i = 0; i < _this.formValidate.selectedVmData.length; i++) {
              console.log(_this.formValidate.selectedVmData[i]);
              let obj = {};
              obj['flavorId'] = _this.formValidate.selectedVmData[i].id.split(',')[1];
              obj['imageId'] = _this.formValidate.selectedVmData[i].id.split(',')[0];
              obj['namePrefix'] = _this.formValidate.selectedVmData[i].name.split('/')[2];
              obj['vmCount'] = _this.formValidate.selectedVmData[i].name.split('/')[4];
              obj['vmType'] = _this.formValidate.selectedVmData[i].name.split('/')[3];
              // console.log(_this.formValidate.selectedVmData[i].name)
              // console.log(_this.formValidate.selectedVmData[i].name.split('/')[5])
              let targetTypeName = _this.formValidate.selectedVmData[i].name.split('/')[5];
              if (targetTypeName == '手动配置') {
                obj['targetName'] = '';
                obj['targetType'] = '0';
              } else if (targetTypeName == '题目') {
                obj['targetName'] = _this.formValidate.selectedVmData[i].name.split('/')[6];
                obj['targetType'] = '2';
              } else if (targetTypeName == '靶标') {
                obj['targetName'] = _this.formValidate.selectedVmData[i].name.split('/')[6];
                obj['targetType'] = '1';
              }
              // if(_this.formValidate.selectedVmData[i].name.split('/')[5]){
              //     obj['targetName'] =  _this.formValidate.selectedVmData[i].name.split('/')[5]
              //     if(this.btnValue==2){//题目
              //         obj['targetType'] = '2'
              //     }else{//靶标
              //         obj['targetType'] = '1'
              //     }
              //     // if(!this.currentTargetValue){
              //     //     obj['targetType'] = '1'
              //     // }else{
              //     //     obj['targetType'] = '2'
              //     // }
              // }else{
              //     obj['targetName'] =  "";
              //     obj['targetType'] = '0'
              // }
              obj['imageName'] = _this.formValidate.selectedVmData[i].name.split('/')[0];
              obj['targetId'] = _this.formValidate.selectedVmData[i].id.split(',')[2];
              arr.push(obj);
            }
            this.axios({
              url: this.baseURL + '/competetopo/projects?deploy=true',
              method: 'POST',
              data: {
                envCount: this.formValidate.setNumber,
                name: this.formValidate.name,
                type: this.formValidate.type,
                vms: arr
              }
            }).then((response) => {
              response = response.data;
              if (response.code == 1) {
                this.createProjectTaskModal = false;
                this.createProjectTaskModalLoading = false;
                this.$nextTick(() => {
                  this.createProjectTaskModalLoading = true;
                });
                this.getProjectList();
              } else {
                this.$Message.error(response.message);
              }
            });
          } else {
            this.$Message.info('请选择设备数据');
            this.createProjectTaskModalLoading = false;
            this.$nextTick(() => {
              this.createProjectTaskModalLoading = true;
            });
          }
        } else {
          this.createProjectTaskModalLoading = false;
          this.$nextTick(() => {
            this.createProjectTaskModalLoading = true;
          });
        }
      });
    },
    getTargetVmList() {
      let _this = this;
      this.axios({
        url: this.baseURL + '/nsrep-targetinfo/targetManage/queryTargetPage?page=1&rows=1000000'
      }).then((response) => {
        response = response.data;
        if (response.code == 1) {
          _this.targetVmListData = [];
          let data_ = response.attribute.data;
          for (let i = 0; i < data_.length; i++) {
            if (data_[i].imageId) {
              _this.targetVmListData.push(data_[i]);
            }
          }
        } else {
          this.$Message.error(response.message);
        }
      });
    },
    changeProStatus() {},
    searchProName() {
      this.getProjectList();
    },
    proOnChange() {},
    commitSelectData() {
      let _this = this;
      if (!this.formValidate.vmType) {
        this.$Message.info('请填选择设备类型');
        return;
      }
      if (!this.formValidate.image) {
        this.$Message.info('请选择镜像');
        return;
      }
      if (!this.formValidate.flavor) {
        this.$Message.info('请选择配额');
        return;
      }
      if (!this.formValidate.numbers) {
        this.$Message.info('请填写数量');
        return;
      }
      if (!this.formValidate.pre) {
        this.$Message.info('请填写名称前缀');
        return;
      }
      let currentImageName = '',
        currentFlavorName = '',
        currentTargetName = '',
        targetType = '';
      for (let i = 0; i < _this.imageDataList.length; i++) {
        if (_this.formValidate.image == _this.imageDataList[i].id) {
          currentImageName = _this.imageDataList[i].imagename;
        }
      }
      for (let i = 0; i < _this.flavorDataList.length; i++) {
        if (_this.formValidate.flavor == _this.flavorDataList[i].openstackid) {
          currentFlavorName = _this.flavorDataList[i].flavorname;
        }
      }
      if (this.formValidate.vmType == 'CLIENT') {
        //普通
        targetType = '手动配置';
        _this.formValidate.selectedVmData.push({
          name:
            currentImageName +
            '/' +
            currentFlavorName +
            '/' +
            _this.formValidate.pre +
            '/' +
            _this.formValidate.vmType +
            '/' +
            this.formValidate.numbers +
            '/' +
            targetType,
          id: _this.formValidate.image + ',' + _this.formValidate.flavor
        });
      } else if (this.formValidate.vmType == 'SERVER') {
        //
        if (this.btnValue == 2) {
          //题目
          for (let i = 0; i < _this.targetDataList.length; i++) {
            if (_this.currentTargetValue == _this.targetDataList[i].chaId) {
              currentTargetName = _this.targetDataList[i].name;
            }
          }
          targetType = '题目';
          _this.formValidate.selectedVmData.push({
            name:
              currentImageName +
              '/' +
              currentFlavorName +
              '/' +
              _this.formValidate.pre +
              '/' +
              _this.formValidate.vmType +
              '/' +
              this.formValidate.numbers +
              '/' +
              targetType +
              '/' +
              currentTargetName,
            id:
              _this.formValidate.image +
              ',' +
              _this.formValidate.flavor +
              ',' +
              _this.currentTargetValue
          });
        } else if (this.btnValue == 1) {
          //靶标
          targetType = '靶标';
          for (let i = 0; i < _this.targetVmListData.length; i++) {
            if (_this.currentTargetValueVm == _this.targetVmListData[i].targetId) {
              currentTargetName = _this.targetVmListData[i].targetName;
            }
          }
          _this.formValidate.selectedVmData.push({
            name:
              currentImageName +
              '/' +
              currentFlavorName +
              '/' +
              _this.formValidate.pre +
              '/' +
              _this.formValidate.vmType +
              '/' +
              this.formValidate.numbers +
              '/' +
              targetType +
              '/' +
              currentTargetName,
            id:
              _this.formValidate.image +
              ',' +
              _this.formValidate.flavor +
              ',' +
              _this.currentTargetValue
          });
        }
      }
      // if(this.currentTargetValue){
      //     for(let i=0;i<_this.targetDataList.length;i++){
      //         if(_this.currentTargetValue==_this.targetDataList[i].chaId){
      //             currentTargetName = _this.targetDataList[i].name
      //         }
      //     }
      //     // targetType = "题目"
      // }else{
      //     for(let i=0;i<_this.targetVmListData.length;i++){
      //         if(_this.currentTargetValueVm==_this.targetVmListData[i].targetId){
      //             currentTargetName = _this.targetVmListData[i].targetName
      //         }
      //     }
      //     // targetType = "靶机"
      // }
      // if(currentTargetName){
      //      _this.formValidate.selectedVmData.push({
      //         "name":currentImageName+'/'+currentFlavorName+'/'+_this.formValidate.pre +'/'+_this.formValidate.vmType +'/'+this.formValidate.numbers + '/' +currentTargetName,
      //         "id":_this.formValidate.image+','+_this.formValidate.flavor +','+_this.currentTargetValue
      //     })
      // }else{
      //      _this.formValidate.selectedVmData.push({
      //         "name":currentImageName+'/'+currentFlavorName+'/'+_this.formValidate.pre +'/'+_this.formValidate.vmType +'/'+this.formValidate.numbers + '/' +currentTargetName,
      //         "id":_this.formValidate.image+','+_this.formValidate.flavor
      //     })
      // }
      this.formValidate.image = '';
      this.formValidate.flavor = '';
      this.formValidate.numbers = 1;
      this.formValidate.pre = '';
      this.currentTargetValue = '';
      this.currentTargetValueVm = '';
      // this.formValidate.vmType = "";
    }
  }
};
</script>
<style scoped>
.page-wrap {
  padding: 30px;
}
.page-content {
  background-color: #fff;
  border-radius: 10px;
}
.img-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 30px 0 30px;
}
.table-wrap {
  padding: 0 30px;
}
</style>
<style>
.table-wrap .ivu-table-overflowX {
  overflow-x: auto;
}
.table-wrap .ivu-table-overflowX::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}
.table-wrap .ivu-table-overflowX::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.table-wrap .ivu-table-overflowX::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.starlet {
  color: red;
  position: absolute;
  left: -60px;
  font-size: 14px;
  line-height: 38px;
  font-weight: 800;
}
.ivu-table-wrapper {
  overflow: visible !important;
}
</style>
